<template>
  <j-page ref="page" title="登录">
      <view class="login">
        <view class="logo">
          <image class="logo_image" src="/static/LOGO.svg"></image>
        </view>
        <!--<view class="logo_title">欢迎使用捷印</view>-->
        <view class="login_body">
          <!--密码登陆-->
          <view :style="{display:loginType==='password'?'flex':'none'}" >
            <view class="login_body_inputs">
              <view class="login_body_input">
                <u-input style="flex: 1;" v-model="passwordFormData.phone" type="text" height="80" :border="false" :clearable="false" placeholder="输入手机号"/>
              </view>
              <view class="login_body_input">
                <u-input style="flex: 1;" v-model="passwordFormData.password" type="password" height="80" :border="false" :clearable="false" placeholder="输入密码"/>
              </view>
            </view>
            <view class="login_body_link">
              <text class="j-link">忘记密码</text>
            </view>
            <u-button @click="loginClick('password')" :class="['login_button',!passwordFormDataRole && 'login_button_disabled']" :disabled="!passwordFormDataRole" :custom-style="passwordFormDataRole?primaryButtonStyle:primaryButtonDisabledStyle" shape="circle" :hair-line="false">
              登录
            </u-button>
          </view>
          <!--验证码登陆-->
          <view :style="{display:loginType==='authCode'?'flex':'none'}">
            <view class="login_body_inputs">
              <view class="login_body_input">
                <u-input style="flex: 1;" v-model="authCodeFormData.phone" height="80" type="text" :border="false" :clearable="false" placeholder="输入手机号"/>
              </view>
              <view class="login_body_input">
                <u-input style="flex: 1;" v-model="authCodeFormData.authCode" height="80" type="text" :border="false" :clearable="false" placeholder="输入验证码"/>
                <view class="login_body_input_auth_get">
                  <text :class="['j-link',countDown>0 && 'login_body_input_auth_get_disabled']" @tap="$u.throttle(getAuthCode, 2000)">{{
                    countDown<=0?'获取验证码':'重新获取 '+countDown+'s'
                    }}</text>
                </view>
              </view>
            </view>
            <view class="login_body_link">
              <text class="j-link"></text>
            </view>
            <u-button @click="loginClick('authCode')" :class="['login_button',!authCodeFormDataRole&&'login_button_disabled']" :disabled="!authCodeFormDataRole" :custom-style="passwordFormDataRole?primaryButtonStyle:primaryButtonDisabledStyle" shape="circle" :hair-line="false">
              登录
            </u-button>
          </view>
          <!--微信一键登陆-->
          <view :style="{display:(loginType!='authCode' && loginType!='password')?'flex':'none'}">
            <u-button @click="loginClick('weixin')" :custom-style="primaryButtonStyle" class="login_button login_button_wx" shape="circle" :hair-line="false">
              <u-icon name="weixin-fill" :size="50"></u-icon>
              微信登录
            </u-button>
            <u-button @click="loginType='authCode'" class="login_button login_button_phone" shape="circle" :hair-line="false">手机/验证码登陆</u-button>
          </view>
        </view>
        <view class="login_way">
          <u-divider bg-color="transparent">其他登录方式</u-divider>
          <view class="login_way_icons">
            <!--<u-icon class="login_way_icon" size="70" color="rgb(90, 158, 247)" name="zhifubao-circle-fill"></u-icon>
            <u-icon class="login_way_icon" size="70" color="rgb(94, 170, 222)" name="twitter-circle-fill"></u-icon>
            <u-icon class="login_way_icon" size="70" color="rgb(255, 92, 0)" name="taobao-circle-fill"></u-icon>
            <u-icon class="login_way_icon" size="70" color="rgb(230, 23, 45)" name="weibo-circle-fill"></u-icon>
            <u-icon class="login_way_icon" size="70" color="rgb(35, 160, 240)" name="qq-circle-fill"></u-icon>
            <u-icon class="login_way_icon" size="70" color="rgb(83, 123, 188)" name="facebook-circle-fill"></u-icon>-->
            <u-icon class="login_way_icon" @tap="loginType='default'" size="70" color="rgb(70, 187, 54)" name="weixin-circle-fill"></u-icon>
            <u-icon class="login_way_icon" @tap="loginType='authCode'" size="72" custom-prefix="custom-icon" color="rgb(70, 187, 54)" name="phone-circle-fill"></u-icon>
            <u-icon class="login_way_icon" @tap="loginType='password'" size="70" custom-prefix="custom-icon" color="rgb(70, 187, 54)" name="safety-circle-fill"></u-icon>
          </view>
        </view>
        <view class="login_agreement">
          <u-checkbox-group shape="circle" :label-disabled="true">
            <u-checkbox v-model="agreement">
              <view>
                我已阅读并同意捷印
                <text class="j-link" @tap="$Router.push({path:'/pages/document/document',query:{name:'serviceAgreement'}})">服务条款</text>
                和
                <text class="j-link" @tap="$Router.push({path:'/pages/document/document',query:{name:'privacyPolicy'}})">隐私政策</text>
              </view>
            </u-checkbox>
          </u-checkbox-group>
          <u-modal v-model="showAgreementModal" :show-cancel-button="true" confirm-text="我已阅读并同意" cancel-text="暂不同意" title="欢迎使用捷印" @confirm="agreement=true" @cancel="agreement=false" ref="uModal">
             <view class="login_agreement_modal">
               登陆或注册前请先阅读或同意
               <view style="width: 100%;text-align: center">
                 <text class="j-link" @tap="$Router.push({path:'/pages/document/document',query:{name:'serviceAgreement'}})">服务条款</text>
                 和
                 <text class="j-link" @tap="$Router.push({path:'/pages/document/document',query:{name:'privacyPolicy'}})">隐私政策</text>
               </view>
             </view>
          </u-modal>
        </view>
      </view>
  </j-page>
</template>


<script>
import {getAuthCodeApi,passwordLoginApi,wxLoginApi,authCodeLoginApi} from "@i"
export default {
  data() {
    return {
      agreement:true,//是否同意协议
      showAgreementModal:false,//是否弹出提示用户同意用户协议的弹框
      loginType:'default',//登陆方式 default password authCode
      primaryButtonStyle:{backgroundImage: 'linear-gradient(to right, #56ccf2, #2f80ed)',border:'none',color:"#fff"},//主要按钮的自定义样式
      primaryButtonDisabledStyle:{backgroundImage: 'linear-gradient(to right,#C8C9CC,#C8C9CC)',border:'none',color:"#fff"},//禁用按钮的自定义样式
      wxFormData:{//微信登陆方式表单数据
        code:"",//微信code
      },
      passwordFormData:{//密码登陆方式表单数据
        phone:"",//手机号
        password:"",//密码
      },
      authCodeFormData:{//验证码登陆方式表单数据
        phone:"",//手机号
        authCode:""//验证码
      },
      countDown:0,//获取验证码的倒计时
    }
  },
  computed: {
    //密码登录的表单验证规则
    passwordFormDataRole(){
      return this.$j.regExp.phone.test(this.passwordFormData.phone)
          && this.$j.regExp.password.test(this.passwordFormData.password)
    },
    //验证码登录的表单验证规则
    authCodeFormDataRole(){
      return this.$j.regExp.phone.test(this.authCodeFormData.phone)
          && this.$j.regExp.authCode.test(this.authCodeFormData.authCode)
    }
  },
  methods: {
    wxLogin(){
      const that = this
      console.log(1);
      uni.login({
        provider: 'weixin',
        success: function (data) {
          console.log(data);
          const code = data.code
          that.wxFormData.code = code || '假如这是一个code'
          // 获取用户信息
          uni.getUserInfo({
            provider: 'weixin',
            success: function (infoRes) {
              console.log(infoRes);
              console.log('用户昵称为：' + infoRes.userInfo.nickName);

            }
          });
          uni.showLoading({title:"正在登陆",mask:true})
          wxLoginApi(that.wxFormData)
              .then(res=>{
                that.$u.toast("登陆成功")
                that.$store.commit("setToken",res.token);
                that.$store.commit("setUserInfo",res.data);
                that.$Router.replaceAll({name:"main"})
              })
              .catch(err=>{that.$u.toast("服务器繁忙")})
              .finally(res=>{uni.hideLoading()})
        },
        fail(err){
          console.log(err);
        }
      });
    },
    passwordLogin(){
      uni.showLoading({title:"正在登陆",mask:true})
      passwordLoginApi(this.passwordFormData)
          .then(res=>{
            this.$u.toast("登陆成功")
            this.$store.commit("setToken",res.token);
            this.$store.commit("setUserInfo",res.data);
            this.$Router.replaceAll({name:"main"})
          }).finally(res=>{
        uni.hideLoading()
      })
    },
    authCodeLogin(){
      uni.showLoading({title:"正在登陆",mask:true})
      authCodeLoginApi(this.authCodeFormData)
          .then(res=>{
            this.$store.commit("setToken",res.token);
            this.$store.commit("setUserInfo",res.data);
            if(res.code===200){
              this.$u.toast("登陆成功")
              this.$Router.replaceAll({name:"main"})
            }else if(res.code===201){
              this.$u.toast("注册成功")
            }
          })
          .finally(res=>{
        uni.hideLoading()
      })
    },
    loginClick(type){
      if(this.agreement){
        /*this.$Router.pushTab({name:"main"})*/
        switch (type){
          case "weixin": this.wxLogin();break;
          case "authCode": this.authCodeLogin();break;
          case "password": this.passwordLogin();break;
        }
      }else {
        //未同意用户协议
        this.showAgreementModal = true
      }
    },
    getAuthCode(){
      if(this.countDown<=0){
        uni.showLoading({title:"正在发送验证码",mask:true})
        getAuthCodeApi()
        .then(res=>{
          this.$u.toast("发送成功")
          this.countDown = 60
          let si = setInterval(()=>{
            if(this.countDown>0){
              this.countDown--
            }else {
              clearInterval(si)
              //this.countDown = -1
            }
          },1000)
        })
        .catch(err=>{
          this.$u.toast("发送失败")
        })
        .finally(res=>{
          uni.hideLoading()
        })
      }
    }
  },
  onLoad() {
    uni.hideTabBar()
  }
}
</script>

<style lang="scss" scoped>
.login{
  //padding-top: 100rpx;

  &_body{
    height: 400rpx;
    /*display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;*/
    /*justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;*/

    >view{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }

    &_inputs{
      width: 100%;
    }

    &_input{
      display: flex;
      width: 90%;
      height: 80rpx;
      margin: 40rpx auto;
      padding: 0 30rpx;
      line-height: 80rpx;
      overflow: hidden;
      border: 1px solid #dcdfe6;
      border-radius: 40rpx;
      align-items: center;
      justify-content: center;
      //border: #8f8d8e 1px solid;

      &_auth{

        &_get{
          height: 60rpx;
          width: 250rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-left: 1px solid #dcdfe6;

          &_disabled{
            color: $u-light-color;
          }
        }
      }
    }

    &_link{
      width: 90%;
      text-align: right;
    }
  }

  &_button{
    width: 90%;
    margin: 20rpx 0;
    border-radius: 40rpx;

    &_disabled{
      background-image: linear-gradient(to right,$u-type-info-disabled,$u-type-info-disabled) !important;
    }
  }

  &_way{
    margin-top: 50rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    &_icons{
      margin: 40rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    &_icon{
      margin: 0 10rpx;
    }
  }

  &_agreement{
    display: flex;
    justify-content: center;
    padding: 40rpx;

    &_modal{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
}

.logo{
  display: flex;
  padding: 100rpx 0;
  justify-content: center;

  &_image{
    width: 150rpx;
    height: 150rpx;
  }

  &_title{
    font-weight: 700;
    text-align: center;
    font-size: 34rpx;
    color: #000;
  }
}
</style>

